import 'package:flutter/material.dart';
import 'dart:math';

class ButtonPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ButtonPageState();
  }
}

class ButtonPageState extends State<ButtonPage> {
  Color _randomColor() {
    var red = Random.secure().nextInt(255);
    var greed = Random.secure().nextInt(255);
    var blue = Random.secure().nextInt(255);
    return Color.fromARGB(255, red, greed, blue);
  }

  ShapeBorder drawShape(int type) {
    final borderWidth = Random.secure().nextInt(5).toDouble();
    final radiusWidth = Random.secure().nextInt(50).toDouble();

    switch (type) {
      // border
      case 0:
        return Border.all(
          // 设置边框样式
          width: borderWidth,
          color: Colors.orange,
          style: BorderStyle.solid,
        );
        break;
      // radius
      case 1:
        return RoundedRectangleBorder(
          side: new BorderSide(
            // 保留原来的边框样式
            width: borderWidth,
            color: Colors.orange,
            style: BorderStyle.solid,
          ),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(radiusWidth),
            topLeft: Radius.circular(radiusWidth),
            bottomLeft: Radius.circular(radiusWidth),
            bottomRight: Radius.circular(radiusWidth),
          ),
        );
        break;
      default:
        return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Button Example"),
        ),
        body: Container(
          child: SingleChildScrollView(child: Center(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("FlatButton"),
              FlatButton(
                  child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
                  onPressed: () {}),
              Divider(),
              Text("FlatButton带图标"),
              FlatButton.icon(
                  // 文本内容
                  icon:
                      Icon(Icons.ac_unit, size: 25.0, color: Colors.lightBlue),
                  label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
                  onPressed: () {}),
              Text("FlatButton"),
              RaisedButton(
                  // 文本内容
                  child: const Text('默认RaisedButton',
                      semanticsLabel: 'RaisedButton'),
                  onPressed: null),
              Divider(),
              Text("RaisedButton自定义"),
              RaisedButton(
                  // 文本内容
                  child:
                      Text("RaisedButton自定义", semanticsLabel: 'FLAT BUTTON 2'),
                  // 按钮颜色
                  color: _randomColor(),
                  // 按钮亮度
                  colorBrightness: Brightness.dark,
                  // 高亮时的背景色
                  //highlightColor: Colors.yellow,
                  // 失效时的背景色
                  disabledColor: Colors.grey,
                  // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
                  textColor: Colors.white,
                  // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
                  disabledTextColor: Colors.grey,
                  // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,RaisedButton，RaisedButton，OutlineButton，它们是基于环境ButtonTheme配置的
                  //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
                  textTheme: ButtonTextTheme.normal,
                  // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
                  splashColor: Colors.deepPurple,
                  // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
                  clipBehavior: Clip.antiAlias,
                  padding: EdgeInsets.only(
                      bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
                  shape: Border.all(
                    // 设置边框样式
                    color: Colors.grey,
                    width: 2.0,
                    style: BorderStyle.solid,
                  ),
                  // RaisedButton 的点击事件
                  onPressed: () {},
                  // 改变高亮颜色回掉函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次
                  // 参数 bool，按下后true，恢复false
                  onHighlightChanged: (isClick) {
                    print(isClick);
                  }),
              Divider(),
              Text("FloatingActionButton"),
              FloatingActionButton(
                  // 子视图，一般为Icon，不推荐使用文字
                  child: const Icon(Icons.refresh),
                  // FAB的文字解释，FAB被长按时显示，也是无障碍功能
                  tooltip: "提示",
                  // 前景色
                  foregroundColor: Colors.white,
                  // 背景色
                  backgroundColor: Colors.red,
                  // hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果,简单理解为两个界面内拥有同样tag的元素在界面切换过程中，会有动画效果，是界面切换不再那么生硬。
                  heroTag: null,
                  // 未点击时阴影值，默认6.0
                  elevation: 7.0,
                  // 点击时阴影值，默认12.0
                  highlightElevation: 14.0,
                  // 点击事件回调
                  onPressed: () {
                    Scaffold.of(context).showSnackBar(SnackBar(
                      content: Text("FAB is Clicked"),
                    ));
                  },
                  // 是否为“mini”类型，默认为false,FAB 分为三种类型：regular, mini, and extended
                  mini: false,
                  // 定义FAB的shape，设置shape时，默认的elevation将会失效,默认为CircleBorder
                  shape: CircleBorder(),
                  // shape: drawShape(0),
                  // 是否为”extended”类型
                  isExtended: true),
              Divider(),
              Text("IconButton"),
              IconButton(
                  // 文本内容
                  icon: Icon(Icons.volume_up),
                  tooltip: 'Increase volume by 10%',
                  onPressed: null),
              Divider(),
              Text("IconButton自定义"),
              IconButton(
                  // 定义图标在IconButton中的定位方式,AlignmentGeometry 如果父Widget尺寸大于child Widget尺寸，这个属性设置会起作用，有很多种对齐方式。
                  alignment: AlignmentDirectional.center,
                  // 按钮颜色
                  color: _randomColor(),
                  // 如果图标被禁用，则用于按钮内图标的颜色。默认为当前主题的ThemeData.disabledColor
                  disabledColor: _randomColor(),
                  // 高亮时的背景色
                  highlightColor: Colors.yellow,
                  // 按钮内图标的大小
                  icon: Icon(Icons.access_alarm),
                  // 图标尺寸
                  iconSize:
                      (Random.secure().nextInt(20) + 20).toDouble(), // 随机大小
                  // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
                  splashColor: _randomColor(),
                  padding: new EdgeInsets.only(
                      bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
                  // 描述按下按钮时将发生的操作的文本
                  tooltip: '这是提示信息',
                  // IconButton 的点击事件
                  onPressed: () {}),
              Divider(),
              Text("IconButton"),
              OutlineButton.icon(
                  // 文本内容
                  icon: Icon(Icons.accessibility_new,
                      size: 25.0, color: _randomColor()),
                  label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
                  onPressed: null),
              Divider(),
              Text("IconButton自定义"),
              OutlineButton(
                  // 文本内容
                  child: Text("文本内容", semanticsLabel: 'FLAT BUTTON 2'),
                  // 边框的颜色,颜色也可以走主题色 Theme.of(context).primaryColor
                  borderSide: new BorderSide(
                      color: _randomColor(),
                      width: Random.secure().nextInt(10).toDouble()),
                  // 按钮颜色
                  color: _randomColor(),
                  // 按钮失效时边框颜色
                  disabledBorderColor: Colors.red,
                  highlightedBorderColor: Colors.black54,
                  // 高亮时的背景色
                  highlightColor: Colors.yellow,
                  // 失效时的背景色
                  //disabledColor: Colors.grey,
                  // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
                  textColor: _randomColor(),
                  // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
                  disabledTextColor: _randomColor(),
                  // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,OutlineButton，OutlineButton，OutlineButton，它们是基于环境ButtonTheme配置的
                  //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
                  textTheme: ButtonTextTheme.normal,
                  // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
                  splashColor: _randomColor(),
                  // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
                  clipBehavior: Clip.antiAlias,
                  padding: new EdgeInsets.only(
                      bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
                  //高亮时候的阴影
                  highlightElevation: 10.0,
                  shape: drawShape(0), // 在Outline 里只能设置圆角,边框用borderSide
                  // OutlineButton 的点击事件
                  onPressed: null),
            ],
          ))) 
        ),
      );
  }
}
